<template>
  <div class="app-header">
    <div class="logo">{{user.title}}</div>
    <div class="header-right">
      <div class="header-right-line"></div>
      <HeaderNav />
      <div class="flex-1"></div>
      <HeaderInfo />
    </div>
  </div>
</template>
<script>
import HeaderNav from "./components/header-nav.vue";
import HeaderInfo from "./components/header-info.vue";
import { getUserProfile } from "@/api/system/user";

export default {
  name: "AppHeader",
  components: {
    HeaderNav,
    HeaderInfo,
  },
  data() {
      return {
          user: {},
      }
  },
  created() {
      this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
      if (response && response.data && response.data.title != null && response.data.title !== '') {
        this.title = response.data.title
        this.user = response.data;
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.app-header {
  min-height: 70px;
  height: 70px;
  width: 100%;
  display: flex;
  overflow: hidden;

  .logo {
    width: 532px;
    min-width: 532px;
    height: 70px;
    background-image: url("~@/assets/images/header/logo.png");
    background-repeat: no-repeat;
    font-weight: bold;
    font-size: 25px;
    color: #FCFDFF;
    line-height: 60px;
    font-family: 'logo';
    padding-left: 22px;
  }

  .header-right {
    flex: 1;
    width: 100%;
    margin-left: 34px;
    display: flex;
    position: relative;

    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 150%;
      height: 42px;
      transform: skew(-45deg) translateX(-30px);
      background: linear-gradient(90deg, #c0cff8, #ffffff);
      border-left: 1px solid #4373f1;
      border-bottom: 1px solid #4373f1;
      z-index: 0;
    }

    .header-right-line {
      height: 10px;
      width: 120%;
      position: absolute;
      left: -50px;
      top: 52px;
      color: red;
      background-image: url("~@/assets/images/header/bottom-line.svg");
      background-repeat: repeat-x;
    }
  }
}
</style>
